<script setup>
import MCard from '@/components/HCard.vue'
import { useCommonTypesStore } from '@/stores/commonTypes.js'
const { state } = useCommonTypesStore()
const emit = defineEmits([
  'update:show',
  'update:orderStatus',
  'reset',
  'confirm'
])
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  orderStatus: {
    type: Array,
    default: () => []
  }
})
const isShow = computed({
  get: () => props.show,
  set: (val) => {
    emit('update:show', val)
  }
})
const activeOrderStatus = computed({
  get: () => props.orderStatus,
  set: (val) => {
    emit('update:orderStatus', val)
  }
})
const toggleState = (item, key = 'value') => {
  const index = activeOrderStatus.value.findIndex(
    (selectedItem) => selectedItem[key] === item[key]
  )
  if (index !== -1) {
    activeOrderStatus.value.splice(index, 1)
  } else {
    activeOrderStatus.value.push(item)
  }
}
const isActive = (item, key = 'value') => {
  return (
    activeOrderStatus.value.findIndex(
      (selectedItem) => selectedItem[key] === item[key]
    ) > -1
  )
}
const handleReset = () => {
  activeOrderStatus.value = []
  emit('reset')
  setTimeout(() => {
    isShow.value = false
  }, 1000)
}
const handleConfirm = () => {
  isShow.value = false
  emit('confirm')
}
</script>

<template>
  <van-popup
    v-model="isShow"
    closeable
    round
    close-icon="arrow-down"
    position="bottom"
    custom-style="border-top-left-radius: 3px; border-top-right-radius: 3px;"
    :style="{ height: '50%' }"
  >
    <div
      class="relative h-full box-border overflow-hidden pb-65px flex flex-col"
    >
      <div
        class="px-12px flex items-center border-b-1px h-50px border-b-solid border-b-[#F2F5FA]"
      >
        <span class="text-16px font-600 leading-16px text-#171A1D">
          处理状态
        </span>
      </div>
      <div
        class="w-full box-border flex-1 flex overflow-x-hidden overflow-y-auto"
      >
        <div class="w-full">
          <m-card>
            <ul class="type-list-item !m-0">
              <li
                v-for="item in state.workerOrderStatus"
                :key="item.label"
                :class="isActive(item) ? 'current' : ''"
                @click="toggleState(item)"
              >
                {{ item.label }}
              </li>
            </ul>
          </m-card>
        </div>
      </div>
      <div
        class="h-56px absolute bottom-0 w-full m-0 my-10px bg-white shadow-[0_-10px_16px_0_#0000000d] box-border"
      >
        <m-card>
          <ul class="type-list-item" style="margin-top: -22px">
            <li
              class="reset w-120px"
              style="color: #36b374"
              @click="handleReset"
            >
              重置
            </li>
            <li
              class="reset bg-[#36B374] flex-1"
              @click="handleConfirm"
              style="color: white"
            >
              确定
            </li>
          </ul>
        </m-card>
      </div>
    </div>
  </van-popup>
</template>

<style scoped lang="less">
.type-list-item {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 20px auto;
  row-gap: 2.5vw;
  column-gap: 3vw;
  align-content: flex-start;
  box-sizing: border-box;
  li {
    box-sizing: border-box;
    width: calc((100% - 8vw) / 3);
    height: 32px;
    border: 0.5px solid #c8c9cc;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #54565c;
    font-size: 14px;
    overflow-x: visible;
  }
  li.current {
    height: 32px;
    background: #36b374;
    border: 1px solid #36b374;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
  }
  li.reset {
    border: 0.5px solid #36b374;
    border-radius: 4px;
    font-weight: 500;
    font-size: 16px;
  }
}
</style>